<template>
  <div class="dll_body">
    <div class="dll_my">
      <div class="dll_my_wo">
        <span>我的</span>
        <span class="dll_my_wo_right" @click="$router.push('/dll_set')"
          ><van-icon name="setting-o" style="margin-top: -10px"
        /></span>
      </div>
      <div class="eee">
        <div
          class="dll_my_tou"
          v-for="item in userList"
          :key="item._id"
          @click="toedit"
        >
          <img :src="item.img" alt="" />
          <div class="dll_span">
            <span style="font-size: 19px">{{ item.name }}</span
            ><br />
            <span style="font-size: 13px">{{ item.desc }}</span>
          </div>
          <!-- </div> -->
        </div>
      </div>
      <div class="dll_my_sort">
        <div class="dll_my_sort_left">
          <div class="dll_number">15</div>
          跑步记录
        </div>
        <div class="dll_my_sort_left">
          <div class="dll_number">15</div>
          同校排行
        </div>
        <div class="dll_my_sort_left">
          <div class="dll_number">999+</div>
          全网排行
        </div>
      </div>
    </div>
    <div class="dll_bottom">
      <div>
        <img src="/img/shoucang.png" alt="" class="dll_shoucang" />
        <van-cell
          class="plan"
          title="我的收藏"
          size="large"
          is-link
          to="dll_shoucang"
        />
      </div>
      <div>
        <img src="/img/shenfenrenzheng.png" alt="" class="dll_shenfen" />
        <van-cell
          class="plan"
          title="身份认证"
          size="large"
          is-link
          to="index"
        />
      </div>
      <div>
        <img src="/img/huiyuan.png" alt="" class="dll_huiyuan" />
        <van-cell
          class="plan"
          title="我的会员"
          size="large"
          is-link
          to="dll_shoucang"
        />
      </div>
      <div>
        <img src="/img/bangzhuzhongxin.png" alt="" class="dll_bangzhu" />
        <van-cell
          class="plan"
          title="帮助中心"
          size="large"
          is-link
          to="dll_bangzhu"
        />
        <img src="/img/yijianfankui.png" alt="" class="dll_yijian" />
        <van-cell
          title="意见反馈"
          size="large"
          is-link
          to="dll_yijian"
          style="padding-left: 55px"
        />
        <img src="/img/guanyuwomen.png" alt="" class="dll_guanyu" />
        <van-cell
          title="关于我们"
          size="large"
          is-link
          to="dll_guanyu"
          style="padding-left: 55px"
        />
      </div>
    </div>
    <div class="dll_myselfzhuye" @click="$router.push('/dll_myself')">
      个人主页<van-icon name="play" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, provide } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
const router = useRouter();

const userList = ref([]);
const getUser = async () => {
  const ids = localStorage.getItem("_id");
  const { data } = await axios.get(
    "http://8.130.46.189:3000/dll/userlist?id=" + ids
  );
  userList.value = data;
};

onMounted(() => {
  getUser();
});

const toedit = () => {
  router.push({
    path: "/dll_personal",
    query: { id: userList.value[0]._id },
  });
};
</script>
<style scoped lang="scss">
.eee {
  width: 270px;
  height: 100px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.dll_body {
  width: 100%;
  height: 95vh;
  background-color: #f7f7f7;
}

.dll_my {
  width: 100%;
  height: 250px;
  background-color: #12c885;
  color: white;

  .dll_my_wo {
    height: 45px;
    padding: 5px 20px;
    font-size: 20px;
    line-height: 50px;

    .dll_my_wo_right {
      float: right;
    }
  }

  .dll_my_tou {
    width: 270px;
    height: 99px;
    font-size: 25px;
    // background-color: red;

    img {
      width: 66px;
      height: 66px;
      margin: 16px 0 0 25px;
      border-radius: 50%;
    }

    .dll_span {
      float: right;
      margin-right: 35px;
      display: inline-block;
      margin-top: 23px;
      font-size: 20px;
    }
  }

  .dll_my_sort {
    width: 100%;
    height: 98px;
    font-size: 12px;

    .dll_my_sort_left {
      width: 75px;
      height: 75px;
      line-height: 40px;
      float: left;
      margin-left: 38px;
      text-align: center;
      margin-top: 15px;

      .dll_number {
        font-size: 25px;
      }
    }
  }
}

.dll_bottom {
  margin-top: 10px;

  .dll_shoucang {
    position: absolute;
    top: 270px;
    left: 18px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

  .dll_shenfen {
    position: absolute;
    top: 331px;
    left: 18px;
    width: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .dll_huiyuan {
    position: absolute;
    top: 386px;
    left: 18px;
    width: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .dll_bangzhu {
    position: absolute;
    top: 446px;
    left: 18px;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

  .dll_yijian {
    position: absolute;
    top: 496px;
    left: 18px;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

  .dll_guanyu {
    position: absolute;
    top: 542px;
    left: 18px;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

  .plan {
    margin-top: 10px;
    padding-left: 55px;
  }
}

.dll_myselfzhuye {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 90px;
  right: -1px;
  width: 75px;
  height: 22px;
  background-color: rgba(130, 245, 203, 0.5); //绿色

  border-radius: 20px 0px 0 20px;
  color: white;
  font-size: 12px;
  z-index: 999;
}
</style>
